<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible = true"><i class="el-icon-edit"></i> 发布博客</el-button>
    <el-button type="danger" @click="getTableData"><i class="el-icon-delete"></i> 删除选中</el-button>
    <ShowBlogMessage ref="blogMessage"></ShowBlogMessage>

    <el-dialog title="发布博客" :visible.sync="dialogFormVisible" fullscreen v-bind:before-close="open">
      <el-form ref="releaseBlog" :model="form" v-bind:rules="rules">
        <el-form-item label="博客标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类" :label-width="formLabelWidth" prop="type">
          <el-select v-model="form.type" placeholder="选择分类" filterable>
            <el-option v-for="(item,index) in types" v-bind:key="index" v-bind:value="item.typeName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" :label-width="formLabelWidth" prop="label">
          <el-select v-model="form.label" placeholder="设置标签" clearable filterable multiple allow-create
                     default-first-option>
            <el-option v-for="(item,index) in labels" v-bind:key="index" v-bind:value="item.labelName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="博客内容" :label-width="formLabelWidth" prop="article">
          <el-radio-group v-model="editType">
            <el-radio :label="1">富文本编辑器</el-radio>
            <el-radio :label="2">MarkDown编辑器</el-radio>
          </el-radio-group>
          <WangEditor v-if="editType===1" v-on:getArticle="catchData" v-bind:content="form.article"></WangEditor>
          <MavonEditor v-if="editType===2" v-on:sendText="catchData" v-bind:content="form.article"></MavonEditor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false" v-on:click="onSubmit('releaseBlog')">确
          定
        </el-button>
      </div>
    </el-dialog>
    <div ref="shows">

    </div>
  </div>
</template>

<script>
import WangEditor from "./WangEditor";
import MavonEditor from "./MavonEditor";
import ShowBlogMessage from "./ShowBlogMessage";
import marked from 'marked'
import qs from 'qs';

export default {
  inject: ['reload'],
  name: "BlogManager",
  components: {
    WangEditor,
    MavonEditor,
    ShowBlogMessage,
  },
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        title: '',
        type: '',
        label: [],
        article: '',
      },
      types: [],
      labels: [],
      editType: 1,//1为富文本编辑器，2为MarkDown编辑器
      formLabelWidth: '100px',
      rules: {
        title: [{required: true, message: '标题不能为空', trigger: 'blur'}],
        type: [{required: true, message: '选择文章分类', trigger: ['blur', 'change']}],
        label: [{type: 'array', required: true, message: '选择文章标签', trigger: ['blur', 'change']}],
      },
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post('/blog/releaseBlog', qs.stringify({
            title: this.form.title,
            type: this.form.type,
            label: this.form.label,
            article: this.form.article,
            labelNum: this.form.label.length,
            editType: this.editType,
          })).then((response) => {
            this.$message.success(response.data.tip.toString());
            this.$refs.releaseBlog.resetFields();
            this.reload();
          });
        } else {
          this.$message.error("输入内容无效，请正确填写");
        }
      });
    },
    catchData(value) {
      this.form.article = value;
    },

    open() {
      this.$confirm('内容尚未提交，是否退出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogFormVisible = false;
      }).catch(() => {
      });
    },
    getTableData() {
      this.$refs.blogMessage.open();
    }
  },
  mounted() {
    this.axios.post('/blog/queryAllBlogType', qs.stringify({
      start: -1,
    })).then((response) => {
      this.types = response.data;
    });
    this.axios.post('/blog/queryAllBlogLabel', qs.stringify({
      start: -1,
    })).then((response) => {
      this.labels = response.data;
    });

  }
}
</script>

<style scoped>

</style>
